<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js" type="text/javascript" charset="utf-8">
    </script>
    <script type="text/javascript">
        $(function() {
            function zoomImg(o) {
                var zoom = parseInt(o.style.zoom, 10) || 100;
                // 负数向下滚动，正数向上缩放
                zoom += event.wheelDelta / -12; //可适合修改
                if (zoom > 0) o.style.zoom = zoom + '%';
            }
            $(document).ready(function() {
                $(".testBox").bind("mousewheel",
                    function() {
                        zoomImg(this);
                        return false;
                    });
            });
        })
    </script>
</head>

<body>

    <div class="testBox">
        <img src="https://img95.699pic.com/photo/50055/5642.jpg_wh300.jpg" style="width: 100%" />
    </div>

</body>

</html>


